<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3实现瀑布流</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			column-width: 165px;
			-webkit-column-width: 165px;
			-moz-column-width:165px;
			-webkit-column-gap: 20px;
			-moz-column-gap: 20px;
			column-gap: 20px;
			margin: 20px auto;
			padding: 0 20px;
		}
		.item{
			/*在每个图片的父元素div上添加break-inside: avoid;防止内容截断导致顶部内容不对齐*/
			break-inside: avoid;
			width: 165px;
			padding: 10px;
			border: 1px solid #eee;
			border-radius: 10px;
			margin-bottom: 10px;
		}
		.item-img{
			display: block;
			width: 165px;
			height: auto;

		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item"><img class="item-img" src="../images/0.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/2.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/3.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/4.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/5.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/6.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/7.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/8.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/9.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/10.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/11.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/12.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/13.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/14.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/15.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/16.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/17.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/18.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/19.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/20.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/21.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/22.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/23.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/24.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/25.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/26.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/27.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/28.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/30.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/32.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/33.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/34.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/35.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/36.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/37.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/38.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/39.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/40.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/41.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/42.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/43.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/44.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/45.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/46.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/47.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/48.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/49.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/40.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/41.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/42.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/43.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/44.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/45.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/46.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/47.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/48.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/51.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/52.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/53.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/54.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/55.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/56.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/57.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/58.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/59.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/50.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/51.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/52.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/53.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/54.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/55.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/56.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/57.jpg" alt=""></div>
		<div class="item"><img class="item-img" src="../images/58.jpg" alt=""></div>
	</div>
</body>
</html>